Page({
  data: {
    width:'',
    height:'',
    qrcodeUrl:'https://admin.slsxh.com/upload/20240622/VGnNR658Pgu85f72906b6344a433b532581150cbf56e.png',
    tempFilePath:''
  },
  onLoad() {
    this.widget = this.selectComponent('.widget')
  },
  
  // 点击生成海报按钮
  getPaper() {
    console.log(5566);
    
    this.setData({
      tempFilePath: null 
    })
    let bg = "https://admin.slsxh.com/upload/20240622/VGnNR658Pgu85f72906b6344a433b532581150cbf56e.png",
    qrCode = this.data.qrcodeUrl

    wx.showLoading({
      title: '加载中',
      mask: true
    })
    this.wxmlToCanvas(bg, qrCode).then(() => {
        wx.hideLoading()
    }).catch((err)=>{
        wx.hideLoading()
    })
  },
  // 生成海报
  wxmlToCanvas(bg, qrCode) {
    return new Promise((resolve, reject) => {
      let style = {
        posterWapper:{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            position: 'relative',
        },
        
        posterImg: {
            width: 325,
            height: 550
        },
        author: {
            width: 119,
            height: 32,
            borderRadius: 12,
            backgroundColor: 'rgba(255,255,255,0.8)',
            position: 'absolute',
            paddingLeft: 18,
            top: 353,
            left: 45,
        },
        authorText: {
            width: 98,
            height: 32,
            paddingLeft: 13.5,
            fontSize: 11,
            fontWeight: 600,
            color: '#333333',
            verticalAlign: 'middle',
        },
        
        head: {
            width: 51,
            height: 51,
            borderRadius: 25.5,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            position: 'absolute',
            top: 343,
            left: 12,
            backgroundColor: 'rgba(255,255,255,0.8)',
        },
        headBorder: {
            width: 46,
            height: 46,
            backgroundColor: 'rgba(255,255,255)',
            borderRadius: 23,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
        },
        headImg: {
            width: 43,
            height: 43,
            borderRadius: 20,
        },
        posterInfo:{
            position: 'absolute',
            bottom: -6,
            width: 325,
            height: 143,
            backgroundColor: '#FFFFFF',
            borderRadius: 10,
            display: 'flex',
            flexDirection: 'row'
        },
        
        info: {
            width: 210,
            height: 140,
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            paddingTop: 6,
            paddingLeft: 15
        },
        
        title: {
            width: 210,
            height: 24,
            fontSize: 13,
            fontWeight: 600,
            color: '#333333',
            lineHeight: 24
        },
        
        teacher:{
            width: 210,
            height: 24,
            fontSize: 13,
            fontWeight: 400,
            color: '#666666',
            lineHeight: 24,
        },
        line:{
            width: 190,
            height: 1,
            backgroundColor: 'rgba(3,0,0,0.16)'
        },
        tip: {
            height: 24,
            width: 210,
            fontSize: 13,
            fontFamily: 'PingFang SC',
            fontWeight: 600,
            color: '#333333',
            lineHeight: 24,
        },
        
        btn:{
            width: 140,
            height: 33,
            backgroundColor: '#FF6000',
            borderRadius: 19,
            lineHeight: 33,
            textAlign: 'center',
            marginTop: 7.5,
            position: 'relative'
        },
        btnText:{
            width: 140,
            height: 33,
            fontSize: 18,
            fontFamily: 'PingFang SC',
            fontWeight: 600,
            color: '#FFFFFF',
        },
        btnImg:{
            width:37,
            height:18,
            position: 'absolute',
            left: 150,
            top: 9
        },
        
        qrcodeImg:{
            width: 92,
            height: 92,
            marginLeft: 5,
            position: 'absolute',
            bottom: 33,
            right: 12
        }
     
    }
      let wxml = `<view class="poster-wapper">
      <image class="poster-img" src="${bg}"/>
      <view class="author">
          <text class="author-text">作者：${33}</text>
      </view>
      <view class="head">
          <view class="head-border">
              <image class="head-img" src="${bg}"></image>
          </view>
      </view>
      
      <view class="poster-info">
          <view class="info">
              <text class="title">挑战内容：《${33}》</text>
              `+ (66?`<text class="teacher">老师：${55}</text>`:'')
              +` <view class="line"></view>
                  <text class="tip">本次朗读近乎完美！快来听听吧！</text>
          </view>
          <image class="qrcode-img" src="${bg}" />
      </view>
  </view>
`

      this.renderToCanvas({ wxml, style}).then(res => {
        resolve(res)
      })
    })
  },
  //渲染成海报
  renderToCanvas({ wxml, style }) {
    return new Promise((resolve, reject) => {
      
      const p1 = this.widget.renderToCanvas({ wxml, style })
      p1.then((res) => {
        this.container = res
        return this.extraImage(this)
      }).then((res) => {
        resolve(res)
      })
    })
  },
  // 生成临时图片地址
  extraImage() {
    return new Promise((resolve, reject) => {
      const p2 = this.widget.canvasToTempFilePath()
      p2.then((res) => {
        this.setData({
          tempFilePath: res.tempFilePath
        })
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.showModal({
              title: '提示',
              content: '海报已保存到相册，请在手机相册中查看。',
              showCancel: false
            });
          },
          fail(res) {
            wx.showToast({
              title: '保存失败',
              icon: 'none'
            });
          }
        });
        resolve(res.tempFilePath)
      })
    })
  },
})